<template>
    <div>
        <h3>添加页面</h3>
        姓名
        <input type="text" v-model="cha.name">
        职业
        <select v-model="cha.type">
                <option value="">请选择</option>
                <option v-for="item in bang" :value="item.jobeTypeName">{{item.jobeTypeName}}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="ShowJob">
        <input type="button" value="重置" class="btn btn-secondary" @click="Chong">
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>姓名</td>
                    <td>性别</td>
                    <td>出生日期</td>
                    <td>证件类型</td>
                    <td>证件号码</td>
                    <td>手机号</td>
                    <td>职业</td>
                    <td>状态</td>
                    <td>详细地址</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list" :key="item.jobeId">
                    <td>{{item.jobeName}}</td>
                    <td>{{item.jobeSex==1?"女":"男"}}</td>
                    <td>{{moment(item.jobeTime).format('YYYY-MM-DD')}}</td>
                    <td>{{item.jobePet}}</td>
                    <td>{{item.jobeNumber}}</td>
                    <td>{{item.jobeTel}}</td>
                    <td>{{item.jobeTypeName}}</td>
                    <td>{{item.jobeState==0?"启用":"禁用"}}</td>
                    <td>{{item.jobeAddre}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger">
                        <input type="button" value="修改" class="btn btn-warning">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRouter ,useRoute} from 'vue-router';
import moment from 'moment';
const router=useRouter();
const route=useRoute();
onMounted(()=>{
    BangType();
    ShowJob();
})
//定义数组存放下拉框
let bang:any=ref([])
const BangType=()=>{
    axios({
        url:'/api/Jobs/BangJobeType',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        bang.value=res.data
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
const Chong=()=>{
    cha.name='';
    cha.type='';
    ShowJob();
}
//查询条件
let cha:any=reactive({
    name:'',
    type:'',
})
//显示
let list:any=ref([]);
const ShowJob=()=>{
    axios({
        url:'/api/Jobs/ShowJob',
        method:'get',
        params:cha
    })
    .then((res)=>{
        console.log(res);
        list.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>
<style scoped>

</style>